<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.min-2.6.11.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">产品列表</h3>
            </div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">编号</label>
                        <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入编号" v-model="id">
                    </div>

                    <div class="form-group">
                        <label for="exampleInputName2">名字</label>
                        <input type="text" class="form-control" id="exampleInputName3" placeholder="请输入名字"
                            v-model="name" @keyUp.enter="click">
                    </div>
                    <input type="button" class="btn btn-primary" value="添加" @click="click">


                    <div class="form-group">
                        <label for="exampleInputName2">搜索名称关键字</label>
                        <input type="text" class="form-control" id="exampleInputName4" placeholder="请输入搜索名字"
                            v-model="keywords">
                    </div>

                </form>

            </div>
        </div>
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th v-aaa>编号</th>
                    <th v-bbb>名称</th>
                    <th v-ccc>创建时间</th>
                    <th v-aaa>更多操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.ctime | creatTime('YYYY-MM-DD') }}</td>
                    <td><a href="#" @click="del(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>

        <script>
            Vue.directive('aaa', {
                bind: function (el) {
                    el.style.backgroundColor = 'skyblue';
                }
            })
            Vue.directive('bbb', {
                inserted: function (el) {
                    el.style.backgroundColor = 'pink'
                }
            })
            Vue.filter('creatTime', (value) => {
                const date = new Date(value)
                const year = date.getFullYear();
                const month = (date.getMonth() + 1 + '').padStart(2, '0');
                const day = (date.getDay() + '').padStart(2, '0');
                const hour = (date.getHours() + '').padStart(2, '0');
                const min = (date.getMinutes() + '').padStart(2, '0');
                const sec = (date.getSeconds() + '').padStart(2, '0');
                return `${year}-${month}-${day} ${hour}:${min}:${sec}`
            })
            const vm = new Vue({
                el: '#app',
                data: {
                    id: '',
                    name: '',
                    arr: [
                        { id: 1, name: "宝马", ctime: new Date() },
                        { id: 2, name: "奔驰", ctime: new Date() }
                    ],
                    keywords: ''
                },
                methods: {
                    click() {
                        this.arr.push({ id: this.id, name: this.name, ctime: new Date() });
                        this.id = this.name = "";
                    },
                    del(id) {
                        this.arr = this.arr.filter(item => {
                            if (item.id == id) {
                                return false;
                            }
                            return true;
                        })

                    },
                    search(key) {
                        let array = [];
                        this.arr.forEach(e => {
                            if (e.name.indexOf(key) != -1) {
                                array.push(e)
                            }
                        });
                        return array;
                    }
                },
                directives:{
                    ccc:{
                        inserted(e){
                            e.style.backgroundColor = 'red'
                        }
                    }
                }
            })

        </script>
    </div>
</body>

</html>